import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:test_flutter/common/style/common_style.dart';

class BottomNavPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return BottomNavPageState();
  }
}

class BottomNavPageState extends State<BottomNavPage>
    with SingleTickerProviderStateMixin {
  int mSelectIndex = 0;
  late TabController _tabController;
  List<ChildItemView> pages = [
    ChildItemView('首页'),
    ChildItemView("动态"),
    ChildItemView("消息"),
    ChildItemView("我的")
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(vsync: this, length: pages.length);
    _tabController.addListener(_handleTabControllerTick);
  }

  void _handleTabControllerTick() {
    // if (_tabController.index != mSelectIndex) {
    //   _currentIndex = _controller.index;
    //   if (widget.isScrollable)
    //     _scrollToCurrentIndex();
    // }
    setState(() {
      // Rebuild the tabs after a (potentially animated) index change
      // has completed.
    });
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.removeListener(_handleTabControllerTick);
  }

  @override
  Widget build(BuildContext context) {
    return _buildBottomTabScaffold();
  }

  _buildBottomTabScaffold() {
    return Scaffold(
      appBar: AppBar(
        title: Text('底部导航栏'),
      ),
      body: TabBarView(
        controller: _tabController,
        children: pages,
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        notchMargin: 6.0,
        color: Colors.white,
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            _buildBottomTabView(0, Icons.home, '首页'),
            _buildBottomTabView(1, Icons.dynamic_feed, '动态'),
            _buildBottomTabView(2, Icons.message, '消息'),
            _buildBottomTabView(3, Icons.person, '我的'),
          ],
        ),
      ),
    );
  }

  _buildBottomTabView(int index, IconData img, String text) {
    TextStyle style =
        TextStyle(color: UIColors.common_color_black, fontSize: 12);
    Color color = UIColors.common_color_black;
    double iconSize = 20;
    if (index == _tabController.index) {
      iconSize = 25;
      color = UIColors.common_color_blue;
      style = TextStyle(color: UIColors.common_color_blue, fontSize: 14);
    }
    return Expanded(
      flex: 1,
      child: InkWell(
        onTap: () {
          setState(() {
            if (index != _tabController.index) {
              _tabController.index = index;
            }
          });
        },
        child: SizedBox(
          height: 80,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                img,
                color: color,
                size: iconSize,
              ),
              Text(
                text,
                style: style,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class ChildItemView extends StatefulWidget {
  String _title;

  ChildItemView(this._title, {Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => ChildItemViewState();

}

class ChildItemViewState extends State<ChildItemView> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        widget._title,
        style: TextStyle(color: UIColors.common_color_black),
      ),
    );
  }
}
